<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>136-动画-匀速动画-多物体同时运动.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 500px;
			margin: 100px auto;
		}
		.container div{
			width: 100px;
			height: 100px;
			line-height: 100px;
			background-color: black;
			margin-top: 10px;
			opacity: 0.3;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
		<div id="div1">变宽</div>
		<div id="div2">变高</div>
		<div id="div3">变色</div>
	</div>
</body>
<script>
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	oDiv1.onmouseover = function(){
		clearInterval(oDiv1.timer);
		var iSpeed = 0;
		oDiv1.timer = setInterval(function(){
			if(oDiv1.offsetWidth > 400){
				iSpeed = -10;
			}else{
				iSpeed = 10;
			}	
			if(Math.abs(300 - oDiv1.offsetWidth) < Math.abs(iSpeed)){
				oDiv1.style.width = '300px';
				clearInterval(oDiv1.timer);
			}else{
				oDiv1.style.width = oDiv1.offsetWidth + iSpeed + 'px';
			}
		},30)
	
	}

	oDiv2.onmouseover = function(){
		clearInterval(oDiv2.timer);
		var iSpeed = 0;
		oDiv2.timer = setInterval(function(){
			if(oDiv2.offsetHeight > 400){				
				iSpeed = -10;
			}else{
				iSpeed = 10;
			}	
			if(Math.abs(300 - oDiv2.offsetHeight) < Math.abs(iSpeed)){
				oDiv2.style.height = '300px';
				clearInterval(oDiv2.timer);
			}else{
				oDiv2.style.height = oDiv2.offsetHeight + iSpeed + 'px';	
			}
		},30)
	
	}
	oDiv3.onmouseover = function(){
		clearInterval(oDiv3.timer);
		var iSpeed = 0;
		oDiv3.timer = setInterval(function(){
			var current = parseFloat(getComputedStyle(oDiv3,false)["opacity"]);
			current = Math.round(current * 100);
			if(current > 100){
				
				iSpeed = -3;
			}else{
				iSpeed = 3;
			}	
			if(Math.abs(100 - current) < Math.abs(iSpeed)){
				oDiv3.style.opacity = 1;
				clearInterval(oDiv3.timer);
			}else{
				oDiv3.style.opacity = (current + iSpeed)/100;
			}
		},30)
	}
</script>
</html>